.header {
  padding: 0 4rem;
  display: flex;
  align-items: center;
  background-color: #444;
  height: 50px;
}

.header .anticon[tabindex] {
  cursor: default;
}

.header .left,
.header .right {
  flex: 1;
}

.header .left {
  display: flex;
  align-items: center;
}

.header .left img {
  width: 120px;
  transform: translateY(-2px);
}
.header .left .ant-input-suffix,
.header .left .ant-input-affix-wrapper,
.header .left .ant-input-affix-wrapper-focused,
.ant-input-search-icon {
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  background-color: #888;
}
.header .left .ant-input-search-icon::before,
.header .left .ant-input-search-icon::after {
  display: none;
}
.header .left .search {
  position: relative;
  margin-left: 1rem;
  border: none;
  outline: none;
  width: 15rem;
  border-radius: 15px;
}
.header .left .search .ant-input {
  width: 15rem;
  height: 26px;
  line-height: 26px;
  border-radius: 15px;
  border: none !important;
  outline: none !important;
  padding: 3px 0;
  padding-left: 22px;
  background-color: #888;
  transition: background-color 0.5s ease;
}

.header .left .search .ant-input:focus {
  background-color: #fff;
  transition: background-color 0.5s ease;
}
.ant-input-suffix .ant-input-search-icon {
  transition: background-color 0.5s ease;
}
.header
  .left
  .search
  .ant-input:focus
  ~ .ant-input-suffix
  .ant-input-search-icon {
  transition: background-color 0.5s ease;
  background-color: #fff;
}
.header .left .search .ant-input-suffix {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #666;
  transform: rotateY(180deg);
}

.header .right ul {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  margin: 0;
}
.header .right ul li a {
  font-size: 13px;
  display: block;
  padding: 10px;
  color: #ccc;
}
